<template>
    <view class="pagesOrder">
        <z-paging ref="paging" v-model="viewModel" cell-height-mode="dynamic" @query="getQuery">
            <view class="uls">
                <view class="lis" v-for="(item, index) in viewModel" @click="orderClick(item)" :key="index">
                    <view class="lis-top u-border-bottom">
                        <view class="lis-title">{{ item.cinemaName }}</view>
                        <view class="lis-status" :style="{ color: getStatus(item).color }">{{ getStatus(item).name }}</view>
                    </view>
                    <view class="lis-main">
                        <view class="lis-left">
                            <u--image width="150rpx" height="210rpx" showLoading lazyLoad radius="10rpx" :src="item.filmImg"></u--image>
                        </view>
						<view class="lis-right">
						    <view class="lis-name">{{ item.filmName }}</view>
						    <view class="lis-txt">
						        {{ item.startTime | date('hh:MM ~') }}
						        {{ item.endTime | date('hh:MM') }}
						        {{ item.startTime | date('mm-dd') }}
						    </view>
						    <view class="lis-warp">
						        <text>{{ item.cinemaName }}</text>
						    </view>
							<view class="lis-warp">
							    <text>{{ item.seats }}</text>
							</view>
						</view>
                    </view>
                    <view class="lis-info">
                        <view>订单编号：{{ item.orderSn }}</view>
                        <view>下单时间：{{ item.createTime | date }}</view>
                    </view>
                    <view class="lis-bottom u-border-top">
						<view>
							<text>订单总额</text>
							<text class="lis-num">￥{{ item.orderAmount }}</text>
						</view>
						<view>
						    <text>实付</text>
						    <text class="lis-num">￥{{ item.payAmount }}</text>
						</view>
                        <!-- <view class="lis-submit" @click.stop="payClick(item)" v-if="item.orderStatus == 0">
                            <x-btn text="去支付" class="lis-submit"></x-btn>
                        </view> -->
                    </view>
                </view>
            </view>
        </z-paging>
        <x-loading :show="isSync"></x-loading>
    </view>
</template>

<script>
import xLoading from '@/sub_pages/movie/components/x-loading/x-loading.vue';
import xBtn from '@/sub_pages/movie/components/x-btn/x-btn.vue';
import { getOrderList } from '@/sub_pages/movie/common/api/movie.js';
import service from './service.js';
export default {
    components: { xLoading, xBtn },

    data() {
        return {
            viewModel: [],
            tabsIndex: 0,
            tabsList: service.getTabbarList(),
            isSync: true,
        };
    },
    onLoad(e) {
        this.tabsIndex = e.index || 0;
    },

    methods: {
        tabsClick(e) {
            this.tabsIndex = e.index;
            this.$refs.paging.reload();
        },
        async getQuery(pageNum) {
			if (uni.getStorageSync("userInfo")) {
				let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
				let para = {
				    pageNum,
				    pageSize: 10,
				    // orderStatus: this.tabsList[this.tabsIndex].status,
					userId: userInfo.userId
				};
				try {
				    let res = await getOrderList(para);
				    this.isSync = false;
				    let data = res.data.records || [];
				    this.$refs.paging.complete(data);
				} catch (e) {
				    //TODO handle the exception
				    this.$refs.paging.complete(false);
				}
			} else {
				uni.redirectTo({url:"/sub_pages/movie/login/login"});
			}
        },
        async delClick(e) {
            let isTrue = await this.$utils.showModal('提示', '确定删除该订单?');
            if (isTrue) {
                let res = await this.$api.delOrders({ orderId: e.orderId });
                if (res.code == 200) {
                    this.$utils.showToast('删除成功');
                    this.$refs.paging.reload();
                }
            }
        },
        orderClick(e) {
            let url = '/sub_pages/movie/detail/detail?orderId=' + e.orderId;
            uni.navigateTo({ url });
        },
        payClick(e) {
            let url = '/sub_pages/movie/pay/pay?orderId=' + e.orderId;
            uni.navigateTo({ url });
        },
        // getInfo(e) {
        //     console.log('e: ', e);
        //     if (getApp().globalData.subcontracting_movie?.$utils?.isCheckEmpty?.(e.orderInfo.sourceData)) return {};
        //     return e.orderInfo.sourceData;
        // },
        getStatus(e) {
            return service.getStatus(e);
        },
        seatsNum(item) {
            return item?.seats.split(',')?.length || 0;
        },
    },
};
</script>

<style lang="scss" scoped>
.pagesOrder {
    background-color: red;
    /deep/ .zp-paging-container {
        background-color: #f6f6f6;
    }
    .uls {
        padding: 30rpx;
    }
    .lis {
        padding: 30rpx;
        background: #fff;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
        &-top {
            display: flex;
            padding-bottom: 30rpx;
        }
        &-title {
            @include font(28rpx, #999999);
            flex: 1;
            margin-right: 20rpx;
        }
        &-status {
            font-size: 26rpx;
        }
        &-main {
            padding: 30rpx 0;
            display: flex;
        }
        &-left {
            width: 150rpx;
            height: 210rpx;
        }
        &-right {
            margin-left: 20rpx;
            flex: 1;
        }
        &-name {
            @include font(32rpx, #333333, bold);
            margin-bottom: 20rpx;
            @include txtEilLines(2);
        }
        &-txt {
            @include font(26rpx, #666666);
            @include txtEilLines();
        }
        &-warp {
            @include font(26rpx, #666666);
            @include flexWrap;
            text {
                margin-right: 15rpx;
            }
        }
        &-info {
            @include font(26rpx, #666666);
            padding-bottom: 30rpx;
        }
        &-bottom {
            padding-top: 20rpx;
            @include font(28rpx, #333, bold);
            @include flexCenterBetween;
        }
        &-num {
            margin-left: 10rpx;
            @include font(36rpx, #ff8600);
        }
        &-submit {
            width: 179rpx;
            height: 64rpx;
            background: linear-gradient(90deg, #ff8600 0%, #f1be6e 100%);
            border-radius: 50px;
            @include font(28rpx, #ffffff);
        }
    }
}
</style>
